<template>
    <div class="head-content">
        <div class="head-l flex-box">
            <el-icon class="icon" size="20">
                <Fold />
            </el-icon>
        </div>
        <div class="head-r">
            <el-dropdown>
                <div class="dropdown-link flex-box">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    <p class="user-name">admin</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item divided>Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped lang="less">
.flex-box {
    display: flex;
    align-items: center;
}

.head-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background-color: #fff;
    padding-right: 25rpx;
    //background-color: aqua;

    .head-l {

        height: 100%;

        .icon {
            width: 45px;
            height: 100%;
        }

        .icon:hover {
            background-color: #f5f5f5;
            cursor: pointer;

        }
    }

    .head-r {
        .dropdown-link {
            .user-name {
                margin-left: 10px
            }
        }
    }
}
</style>
